<template>
  <div class="caontainer2">
    <table class="max">
      <!-- 标题 -->
      <tr class=" tr2">
        <td class="id center1 tr1 tr2">编号</td>
        <td class="name center1 tr1 tr2">名称</td>
        <td class="price center1 tr1 tr2">价格</td>
        <td class="num center1 tr1 tr2">数量</td>
      </tr>
      <tr class=" tr2" v-for="(item, index) in list" :key="index">
        <td class="center1 tr1">{{ item.id }}</td>
        <td class="center1">{{ item.name }}</td>
        <td class="center1">{{ item.price }}</td>
        <td class="center1">{{ item.num }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "苹果", price: 10, num: 1 },
        { id: 2, name: "香蕉", price: 10, num: 1 },
        { id: 3, name: "橘子", price: 10, num: 1 },
        { id: 4, name: "火龙果", price: 10, num: 1 },
        { id: 5, name: "葡萄", price: 10, num: 1 },
        { id: 6, name: "西瓜", price: 10, num: 1 },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.max{
    height: 58vh;
}
.tr1 {
  padding: 18px 0px;
}
.tr2 {
  border-bottom: 1px black solid;
  opacity: 0.6;
}
.center1 {
  text-align: center;
}
.id {
  width: 10vh;
}
.name {
  width: 40vh;
}
.price {
  width: 20vh;
}
.num {
  width: 20vh;
}
td {
  color: white;
  opacity: 0.7;
}
.caontainer2 {
  padding: 10px 20px;
}
</style>